<template>
  <el-card class="feed-rank-list" body-style="padding:0">
    <template #header>
      <div class="title color2">
        <icon-font icon-class="afl-paixing"></icon-font>
        {{ $t('mes.shippingOrder') }}
      </div>
    </template>
    <template #default>
      <div style="width:100%;height: 200px">
        <el-empty :image-size="40" :description="$t('mes.noDataYet')" v-if="data.length == 0"></el-empty>
        <div style="padding-top: 10px;" v-else>
          <el-table :header-cell-style="{textAlign:'center'}"
                    :cell-style="{textAlign: 'center'}"
                    :data="data" max-height="180" height="180"
                    style="width: 100%;border-top: 1px solid #eee;">
            <el-table-column
                type="index"
                width="50">
            </el-table-column>
            <el-table-column prop="soCode" :label="$t('wms.salesNo')" width="220" />
            <el-table-column prop="deliveryDate" :label="$t('mes.dateOfDelivery')">
              <template #default="scope">
                <div class="name-wrapper">
                  <el-tag effect="plain" size="small" type="success">
                    {{ timestampToDate(scope.row.deliveryDate) }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="salesQty" :label="$t('mes.salesOrdersTotal')" />
            <el-table-column prop="pcsQty" :label="$t('mes.orderTatalOf')" />
          </el-table>
        </div>
      </div>
    </template>
  </el-card>
</template>

<script>
import iconFont from '@/components/IconFont/iconFont'
import { timestampDataTime } from '@/utils/DateUtils'

export default {
  name: 'lvtFeedingFeedList',
  components: { iconFont },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  methods: {
    timestampToDate: (timestamp) => {
      if (timestamp) {
        return timestampDataTime(timestamp)
      } else {
        return timestamp
      }
    }
  }
}
</script>

<style scoped lang="scss">
.feed-rank-list {
  .title {
    font-size: 16px;
    padding: 10px 0 0 20px;
    font-weight: bold
  }

}
</style>
